<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{

            margin: 0;
            padding: 0;
        }
        @keyframes flyto{
            0%{
                offset-distance: 0%;
            }
            100%{
                offset-distance: 100%;
            }

        }

        .map{
            width: 1920px;
            height: 1080px;
            background: url(./img/Map.png) black no-repeat 145px 0;
        }
        .fly{
            width: 30px;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            offset-path: path("M1389,648s-103.9-236.91-355-103");
            offset-distance: 0;
            transform: rotate(180deg);
            animation: flyto 1.5s linear infinite;
        }
        .fly1{
            width: 30px;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            offset-path: path("M1391,649s150.38-164.338,269,19");
            offset-distance: 0;
            transform: rotate(180deg);
            animation: flyto 1.5s linear infinite;
        }
        .fly2{
            width: 30px;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            offset-path: path("M1390,650s17.26-219.533-175-274");
            offset-distance: 0;
            transform: rotate(180deg);
            animation: flyto 1.5s linear infinite;
        }
        .fly3{
            width: 30px;
            position: absolute;
            top: 0;
            left: 0;
            overflow: hidden;
            offset-path: path("M1390,649s49.97,47.584,6,182");
            offset-distance: 0;
            transform: rotate(180deg);
            animation: flyto 1.5s linear infinite;
        }

    </style>
</head>
<body>
    <div class="map">
        <img src="./img/dian.png" alt="" class="fly">
        <img src="./img/dian.png" alt="" class="fly1">
        <img src="./img/dian.png" alt="" class="fly2">
        <img src="./img/dian.png" alt="" class="fly3">
    </div>
</body>
</html>